<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资源分类</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.6.2}" rel="stylesheet"/>
    <style type="text/css">
        .bt {
            text-align: center;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .myimgshow2 {
            width: 100%;
            height: 130px;
        }

        .wintz {
            margin: 1% 0% 0% 1%;
            width: 35%
        }

        .fyt {
            position: relative;
            left: 40%;
            width: 300px;
            height: 0px;
        }

    </style>
</head>

<body class="gray-bg">
<div class="col-sm-12 search-collapse wintz">
    <form id="formId">
        <input type="hidden" name="id" th:value="${fileClassDictId}">
        <div class="select-list">
            <ul>
                <li>
                    <label>名称搜索：</label>
                    <input id="titleName" type="text" name="titleName"/>
                </li>
                <li>
                    <a class="btn btn-primary btn-rounded btn-sm" onclick="findSearch()"><i
                            class="fa fa-search"></i>&nbsp;搜索</a>
                </li>
            </ul>
        </div>
    </form>
</div>

<div class="col-sm-12">
    <div class="col-sm-2"></div>
    <h5>查询结果数量:&nbsp;&nbsp;<span id="total" th:text="${TableDataInfo.total}"></span>&nbsp;&nbsp;条</h5>
    <div class="col-sm-8 select-table table-striped" id="ShowContainer">
        <div th:if="${#lists.isEmpty(TableDataInfo.rows)}">还没有查到数据</div>
        <div class="col-sm-3 optionK" th:value="${fileInfo.id}" th:titleName="${fileInfo.titleName}"
             th:each="fileInfo : ${TableDataInfo.rows}">
            <div class="ibox">
                <div class="ibox-content">
                    <img class="myimgshow2" th:src="${fileInfo.surfacePlotUrl}"
                         th:surfacePlotUrl="${fileInfo.surfacePlotUrl}"
                         th:videoGifUrl="${fileInfo.videoGifUrl}">
                </div>
                <h5 class="bt" th:text="${fileInfo.titleName}"></h5>
                <h5 class="bt">日期: <span th:text="${#dates.format(fileInfo.updateDate, 'yyyy-MM-dd')}"></span></h5>
            </div>
        </div>
    </div>
    <nav aria-label="Page navigation" class="fyt">
        <ul class="pagination  pagination-lg">
            <li onclick="upPage()">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li id="fytym"></li>
            <li onclick="nextPage()">
                <a aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    <div class="col-sm-2"></div>
</div>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var TableDataInfo = [[${TableDataInfo}]];
    var total = 0;      //数据总条数
    var pageNum = 1;   //当前页码
    var pageSize = 16;  //每页条数(默认)
    var sumPageNum = 1;  //总页码数

    update_ym(TableDataInfo);

    //页码更新
    function update_ym(TableDataInfo) {
        if (TableDataInfo.code == 0) {
            total = TableDataInfo.total;   //数据总条数
            $('#total').text(total);
            sumPageNum = Math.ceil(total / pageSize);  //总页码数
            //清除之前的页码,后插入新的页码
            $('.fytym').parent().empty();
            for (var i = sumPageNum; i > 0; i--) {
                if (pageNum == i)
                    $('#fytym').after('<li class="active"><a href="#"  class="fytym">' + i + '</a></li>');
                else
                    $('#fytym').after('<li><a href="#"  class="fytym">' + i + '</a></li>');
            }
            //页码点击事件
            $('.fytym').on('click', function () {
                var pageNum_val = $(this).text();
                if (pageNum_val != pageNum) {
                    pageNum = pageNum_val;
                    findData(pageNum_val);
                }
            });
        }
    }

    //上一页下一页功能实现
    function upPage() {
        if (pageNum != 1) {
            pageNum = --pageNum;
            findData(pageNum);
        }
    }

    function nextPage() {
        if (pageNum != sumPageNum) {
            pageNum = ++pageNum;
            findData(pageNum);
        }
    }

    //按照名称进行搜索
    function findSearch() {
        findData(pageNum);
    }


    //查询请求
    function findData(pageNum) {
        var formData = $('#formId').serializeArray();
        $.operate.post(ctx + 'Video/browse/findSearch', {
            'id': formData[0].value,
            'titleName': formData[1].value,
            'pageNum': pageNum,
        }, function (res) {
            if (res.code == 0) {
                var fileInfoList = res.rows;
                if (fileInfoList != undefined) {
                    $('#ShowContainer').empty();
                    var $win = $('#ShowContainer');
                    for (var i = 0; i < fileInfoList.length; i++) {
                        var fileInfo = fileInfoList[i];
                        renderer(fileInfo, $win);
                    }
                    //再次添加鼠标悬停事件
                    $win.find('.myimgshow2').hover(function () {
                        var videoGifUrl = $(this).attr('videoGifUrl');
                        $(this).attr('src', videoGifUrl);
                    }, function () {
                        var surfacePlotUrl = $(this).attr('surfacePlotUrl');
                        $(this).attr('src', surfacePlotUrl);
                    });
                    refresh_height();
                    update_ym(res);
                } else {
                    //没有可渲染的数据
                    $('#ShowContainer').empty();
                    $('#ShowContainer').append('<div>根据标题没有找到资源...</div>');
                }
            }
            $.modal.closeLoading();
        });
    }


    /**
     * 渲染器
     * @param fileInfo  渲染的数据
     * @param $win   添加的位置
     */
    function renderer(fileInfo, $win) {
        $win.append(
            '<div class="col-sm-3 optionK" value="' + fileInfo.id + '" titleName="' + fileInfo.titleName + '">' +
            '    <div class="ibox">' +
            '        <div class="ibox-content">' +
            '            <img class="myimgshow2" src="' + fileInfo.surfacePlotUrl + '"' +
            '                 surfacePlotUrl="' + fileInfo.surfacePlotUrl + '"\n' +
            '                 videoGifUrl="' + fileInfo.videoGifUrl + '">' +
            '        </div>' +
            '        <h5 class="bt">' + fileInfo.titleName + '</h5>' +
            '        <h5 class="bt">日期: <span>' + fileInfo.updateDate + '</span></h5>' +
            '    </div>' +
            '</div>'
        );
    }


    //鼠标悬停,播放gif
    $("#ShowContainer .myimgshow2").hover(function () {
        var videoGifUrl = $(this).attr('videoGifUrl');
        $(this).attr('src', videoGifUrl);
    }, function () {
        var surfacePlotUrl = $(this).attr('surfacePlotUrl');
        $(this).attr('src', surfacePlotUrl);
    });

    //点击了选项卡跳转
    $('#ShowContainer').on('click', '.optionK', function () {
        var valueid = $(this).attr('value');
        var titleName = $(this).attr('titleName');
        var url = ctx + "Video/detail/" + valueid;
        $.modal.openTab(titleName, url);
    });


    //动态更新图片高度
    function refresh_height() {
        var img_width = $('.myimgshow2').get(0).width;
        $('.myimgshow2').css('height', img_width * 0.62);
    }

    refresh_height();

</script>
</body>
</html>
